﻿<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>橡树科技－JavaDemoSystem</title>
<link type="text/css" rel="stylesheet" media="all" href="../styles/global.css"/>
<link type="text/css" rel="stylesheet" media="all" href="../styles/global_color.css" />
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/messages_zh.js"></script>
<script language="javascript" type="text/javascript">
	$().ready(function() {//默认表单提交时验证
		// 在键盘按下并释放及提交后验证提交表单
	  	$(".main_form").validate({
			//校验规则
		    rules: {
		   /*    firstname: "required", */
		    	roleName: {
			        required: true,//不能为空
			        rangelength:[1,16]//输入长度必须介于 6 和 20 之间的字符串（汉字算一个字符）。
				}
		    },
		  	//设置错误提示信息
		    messages: {
		/* 	    firstname: "请输入您的名字", */
			    roleName: {
			        required: "请输入角色名称",
			        rangelength: "请输入1-16位字符串"
		      	}	  
		    },
		    //设置错误信息存放地方
		    errorPlacement:function(error,element) {
		    	console.log(element);
		        error.appendTo(element.next().next());//将错误信息追加到id=name_msg的标签末尾（内部）
		    }
		});
	});
	
	$(function(){
		//设置菜单高亮显示
		$(".role_off").attr("class","role_on");
	});

	//保存成功的提示消息
    function showResult() {
    	showResultDiv(true);
    	//提示3秒后消失
    	window.setTimeout("showResultDiv(false);", 3000);
    }
	
    function showResultDiv(flag) {
	    var divResult = document.getElementById("save_result_info");
	    if(flag){
	    	divResult.style.display = "block";
	    } else {
	    	divResult.style.display = "none";
	    	//重定向到查询
	    	location.href="${pageContext.request.contextPath}/role/list";
	    }
    }
    
    //校验角色名是否重复
	function  checkName() {
 		if(!$("#roleName").valid()){//校验
			return false;
		}; 
 		//设置验证的正则表达式
/* 		var reg=/^[0-9_a-zA-Z\u4e00-\u9fa5]{1,16}$/;
		//得到id为roleName的框判断是否符合固定格式
		if(!reg.test($("#roleName").val())){
			$("#name_msg").text("由16位以内的中，英文，数字以及下划线组成").css("color","red");
			return false;
		}  */
		//如果满足格式，再进行Ajax增加姓名的验重
		var flag=false;	
		$.ajax({
			url:"${pageContext.request.contextPath}/role/ajaxCheckName?roleName="+$("#roleName").val(),
			type:"GET",
			datatype:"text",
			success:function(data){
				//进行ajax返回的数据处理
				if(data.trim()=="OK"){
					flag=true;
				}
			},
			async:false
		});
		
		if(flag){
			$("#name_msg").text("通过验证").css("color","green");
			return true;
		}else{
			$("#name_msg").text("此名称已经存在").css("color","red");
			return false;
		}
				
	}
	
	//校验模块是否被选中
	function checkModule() {
		//得到被选中的checkbox，如果没有被选中的，则验证失败
		if($(":checkbox:checked").length==0){
			$("#module_msg").text("至少选择一个权限").css("color","red");
			return false;
		}else{
			$("#module_msg").text("验证通过").css("color","green");
			return true;
		}
	}
	//提交
	function dataSubmit(){
		if(checkName()+checkModule()==2){
			$.ajax({
				url:"${pageContext.request.contextPath}/role/add",
				type:"post",
				data:$('.main_form').serialize(),
				dataType:"text",
				success:function(data){
					//进行ajax返回的数据处理
					if(data.trim() == "success"){
						showResult();//成功提示
					} else {
						alert("新增失败！");
					}
				}
			});
			
		}
	}
	
</script>
<style>
	.error{/* 校验错误信息上色 */
		color:red;
	}
</style>
</head>
<body>
<div id="header"> <img src="../images/logo.png" alt="logo" class="left"/> <a href="#">[退出]</a> </div>
<div id="navi">
   	<%@include file="/jsp/commen/menu.jsp" %>
</div>
<div id="main">
  <div id="save_result_info" class="save_success">保存成功！</div>
  	<form action="" class="main_form" >
    	<div class="text_info clearfix"><span>角色名称：</span></div>
    	<div class="input_info">
	      	<input type="text" class="width200" name="roleName"
	      	onblur="checkName();" id="roleName" required="true" rangelength:[1,16]/>
	      	<span class="required">*</span>
	      	<div class="validate_msg_medium" id="name_msg"><!-- 不能为空，且为16长度的字母、数字和汉字的组合 --></div>
    	</div>
    	<div class="text_info clearfix"><span>设置权限：</span></div>
    	<div class="input_info_high">
      		<div class="input_info_scroll">
        		<ul>
        		<c:forEach items="${moduleInfos }" var="moduleInfo">
        			<li>
            			<input type="checkbox" value="${moduleInfo.moduleId }" name="moduleId"/>
            				${moduleInfo.name }
          			</li>
        		</c:forEach>
        		</ul>
      		</div>
      		<span class="required">*</span>
      		<div class="validate_msg_tiny" id="module_msg"><!-- 至少选择一个权限 --></div>
    	</div>
	    <div class="button_info clearfix">
	      <input type="button" value="保存" class="btn_save" onclick="dataSubmit();"/>
	      <input type="button" value="取消" class="btn_save" onclick="history.back();"/>
	    </div>
  </form>
</div>
<div id="footer">
  <p>[源自顶端的技术，最优秀的师资，最真实的企业环境，最适用的实战项目]</p>
  <p>版权所有(C)橡树科技IT培训集团公司 </p>
</div>
</body>
</html>
